<template>
  <el-dialog v-model="dialogVisible" title="下发" width="500px" draggable :z-index="1000" @close="_colse">
    <el-form
      ref="trainPlanFormRef"
      label-width="100px"
      label-suffix=" :"
      :rules="rules"
      :model="dialogProps.row"
      v-if="dialogProps.row"
    >
      <el-form-item label="装置" prop="deviceList">
        <el-select multiple clearable v-model="dialogProps.row!.deviceList" placeholder="请选择下发装置">
          <el-option v-for="item in deviceSelList" :key="item.deviceId" :label="item.deviceName" :value="item.deviceId" />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="_colse">取消</el-button>
        <el-button type="primary" @click="_submit">确认</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts" name="ResetPsdDrawer">
import { ref, reactive } from "vue";
import { FormInstance } from "element-plus";
import { ResultData, TrainPlan } from "@/api/interface";
import { getCabinetSelList } from "@/api/modules/files1Manage/cabinet";

import { useRouter } from "vue-router";
interface DialogProps {
  title: string;
  row: Partial<TrainPlan.ResTrainPlanList>;
  api?: (params: any) => Promise<any>;
  getTableList?: () => void;
  resetTableList?: () => void;
}
const router = useRouter();
const rules = reactive({
  deviceList: [{ required: true, trigger: "blur", message: "请选择适用装置" }]
});
const dialogVisible = ref(false);
const dialogProps = ref<DialogProps>({
  title: "",
  row: {}
});

const trainPlanFormRef = ref<FormInstance>();
const deviceSelList: any = ref([]);
// 接收父组件传过来的参数
const acceptParams = async (params: DialogProps) => {
  dialogProps.value = params;
  dialogVisible.value = true;

  let deviceList = dialogProps.value.row.deviceList;

  if (deviceList?.length) {
    deviceList = deviceList.map((item: any) => {
      return item.deviceId;
    });
    dialogProps.value.row.deviceList = deviceList;
  }

  await getCabinetSelData();
};

/**
 * 获取装置选择列表
 */
const getCabinetSelData = async () => {
  const { result } = (await getCabinetSelList({
    pageNum: 1,
    pageSize: 10000
  })) as ResultData;
  deviceSelList.value = result.dataList;
};

/**
 * 关闭弹窗
 */
const _colse = () => {
  dialogVisible.value = false;
  trainPlanFormRef.value && trainPlanFormRef.value.resetFields();
};

const getSendRecord = async (controlId: string) => {
  router.push(`/train1Manage/trainPlanControl/sendRecordDtl/${controlId}`);
  dialogVisible.value = false;
};
/**
 * 提交修改信息
 */
const _submit = async (): Promise<void> => {
  trainPlanFormRef.value!.validate(async valid => {
    if (!valid) return;
    try {
      let { planId, deviceList } = dialogProps.value.row;
      let deviceListFilter: any = [];
      if (deviceList?.length) {
        deviceListFilter = deviceList.map((item: any) => {
          return {
            deviceId: item
          };
        });
      }
      const { result } = (await dialogProps.value.api!({ planId, deviceList: deviceListFilter })) as ResultData;
      getSendRecord(result.controlId);
    } catch (error) {
      console.log(error);
    }
  });
};
defineExpose({
  acceptParams
});
</script>
